<template>
    <div>
        <page-header title="三方违约" content="tripartite">
            <template #content>
                <p>在发起三方违约之前，请注意确认自己就三方协议是否拿到。原三方协议所签订企业的违约函是否拿到！否则后果自负！</p>
            </template>
            <el-button icon="el-icon-circle-plus" round @click="tripartiteCommit()" >违约发起</el-button>
        </page-header>
        <page-main title="" v-if="isCommit" v-loading="loading">
            <el-timeline>
                <el-timeline-item
                v-for="(activity, index) in activities"
                :key="index"
                :icon="activity.icon"
                :type="activity.type"
                :color="activity.color"
                :size="activity.size"
                :timestamp="activity.timestamp">
                {{activity.content}}
                </el-timeline-item>
            </el-timeline>
        </page-main>
        <page-main title="" v-else>
            <p>暂无三方违约申请</p>
        </page-main>
        <el-dialog
            title="违约文件上传"
            :visible.sync="dialogVisible"
            width="50%"
            :before-close="handleClose">
            <page-main title="请上传违约文件，支持pdf和word">
                <file-upload :files="files" action="http://localhost:8000/public/upload3" name="file" :data="{'token':'TKD628431923530324'}" @handlesuccess3="handlesuccess3" :ext="['docx', 'pdf']" succuss="handlesuccess3"/>
            </page-main>
        </el-dialog>
    </div>
</template>

<script>
import Date from '../../util/date'
  export default {
    data() {
      return {
        activities: [{
          content: '发起成功',
          size: 'large',
        }, {
          content: '文件提交成功，等待辅导员处理。',
          size: 'large',
        }, {
          content: '辅导员回收文件成功！',
          size: 'large'
        }, {
          content: '辅导员发放新三方。',
          size: 'large'
        }],
        level: 0,
        isCommit: true,
        loading: true,
        tripartite: {},
        dialogVisible: false,
        files: []
        
      };
    },
    created() {
        this.loadData()
    },
    methods: {
        initData() {
            for(let i = 0; i < 4; i++) {
                if (this.level > i) {
                    this.activities[i].type = 'success'
                    this.activities[i].icon = 'el-icon-success'
                    this.activities[i].timestamp = '2018-04-03 20:46'
                } else {
                    this.activities[i].icon = 'el-icon-loading'
                }
            }
        },
        loadData() {
            let uid = this.$store.getters['user/uid'].id
            this.$util.post('public/selectTripartiteByUid', {uid: uid}).then(res => {
                if (res.level == undefined || res == null) {
                    this.isCommit = false
                } else {
                    this.tripartite = res
                    this.level = res.level
                }
            })
            setTimeout(() => {
                this.initData()
                this.loading = false
            }, 1000);
        },
        tripartiteCommit() {
            if(!this.isCommit) {
                this.initTripartite()
            } else {
                this.dialogVisible = true
            }
        },
        initTripartite() {
            this.$confirm('您现在正在申请三方违约, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.tripartite.uid = this.$store.getters['user/uid'].id
                this.tripartite.level = 1
                this.tripartite.timestamp1 = new Date().Format("yyyy-MM-dd hh:mm:ss")
                this.tripartite.abrogation = false
                this.$util.post('public/insertTripartite', this.tripartite).then(res => {
                    this.$nextTick(() => {
                        this.isCommit = true
                        this.$router.push({
                            name: 'reload'
                        })
                    })
                    this.$message({
                        type: 'success',
                        message: '操作成功！'
                    });  
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消操作！'
                });          
            });
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
            .then(_ => {
                done();
            })
            .catch(_ => {});
        },
        handlesuccess3(res, file) {
            this.files.push({
                name: file.name,
                url: res != '' ? res : ''
            })
            this.$nextTick(() => {
                if (res == '') {
                    this.$message.warning(res.error)
                    this.files.pop()
                }
            })
            this.tripartite.filepath = res
            this.tripartite.level = 2
            this.tripartite.timestamp2 = new Date().Format("yyyy-MM-dd hh:mm:ss")
            this.$util.post('public/updateTripartiteByPrimaryKeySelective', this.tripartite).then(res => {
                this.$nextTick(() => {
                    this.isCommit = true
                    this.dialogVisible = false
                    this.$router.push({
                        name: 'reload'
                    })
                })
                this.$message({
                    type: 'success',
                    message: '操作成功！'
                });

            })
        },
    }
  };
</script>